<template>
  <div class="component-container feature-out">
    <div ref="searchDiv" class="filter-container">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        size="small"
        align="left"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        class="filter-item"
        @change="onDatePickerChange"
        style="width: 360px;"
      ></el-date-picker>

      <el-select
        size="small"
        placeholder="请选择类别"
        class="filter-item"
        v-model="listQuery.type"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-input
        v-model="listQuery.keyword"
        size="medium"
        class="filter-item"
        placeholder="请输入关键词"
        style="width: 200px;"
      ></el-input>

      <el-button
        @click="handleQuery"
        type="primary"
        size="small"
        class="filter-item"
        ref="btnQuery"
        >查询</el-button
      >
      <el-button
        @click="handleClear"
        type="primary"
        size="small"
        class="filter-item"
        ref="btnRefresh"
        >重置</el-button
      >
    </div>
    <el-table
      :data="list"
      ref="multipleTable"
      :max-height="tableHeight"
      style="width:100%;margin-bottom: 12px;"
      highlight-current-row
    >
      <!-- <el-table-column
        label="进件ID"
        prop="apply_risk_id"
        align="center"
        min-width="120px"
      ></el-table-column> -->
      <el-table-column
        label="用户名"
        prop="apply_risk_name"
        align="center"
        min-width="120px"
      ></el-table-column>
      <el-table-column
        label="用户ID"
        prop="individual_id"
        min-width="120px"
        align="center"
      ></el-table-column>
      <el-table-column
        label="类别"
        prop="trigger_type"
        min-width="120px"
        align="center"
      ></el-table-column>
      <el-table-column
        label="命中规则"
        prop="rule_name"
        align="center"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="详细信息"
        prop="message"
        align="center"
        min-width="260"
      ></el-table-column>
      <el-table-column label="授信结果" align="center" min-width="260">
        <template slot-scope="scope">
          {{ getverifyResult(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column
        label="记录时间"
        prop="update_time"
        align="center"
        width="160"
      ></el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="100">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            size="mini"
            @click="handleDetail(row.apply_risk_id)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.current_page"
      :page-sizes="[10, 20, 50]"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { getApprovalLsit } from '@/api/risksystem/riskWarning/task/index'
@Component({
  name: 'trustTrial',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  // 搜索数据源
  private options = [
    { label: '全部', value: '' },
    { label: '进件', value: 1 },
    { label: '提现', value: 2 }
  ]
  // 搜索
  private dateRange = []

  private listQuery: any = {
    type: undefined,
    keyword: undefined,
    start: this.dateRange[0],
    end: this.dateRange[1],
    limit: 10,
    current_page: 1
  }
  private total = 0
  private list = []
  private tableHeight: any = null
  private tableLoading = false
  @Watch('dateRange')
  private onDatePickerChange(value: boolean) {
    console.log(11111)
    this.listQuery.start = this.dateRange ? this.dateRange[0] : undefined
    this.listQuery.end = this.dateRange ? this.dateRange[1] : undefined
  }
  created() {
    this.getList()
  }
  mounted() {
    this.init()
  }
  beforeDestroy() {
    // 摧毁监听事件
    window.onresize = null
  }
  // 表格高度
  private init() {
    var _this = this
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - (this.$refs.searchDiv as any).offsetHeight - 230
    })
    window.onresize = () => {
      this.$nextTick(() => {
        this.tableHeight =
          window.innerHeight - (this.$refs.searchDiv as any).offsetHeight - 230
      })
    }
  }
  private async getList() {
    // 加载数据
    this.tableLoading = true
    const res = await getApprovalLsit({ search: this.listQuery })
    this.list = res.data.list
    this.total = Number(res.data.count)
  }
  // 重置搜索
  private handleClear() {
    this.dateRange = []
    this.listQuery = {
      type: undefined,
      keyword: undefined,
      start: this.dateRange[0],
      end: this.dateRange[1],
      limit: 10,
      current_page: 1
    }
    this.getList()
  }
  // 查询
  private handleQuery() {
    this.listQuery.current_page = 1
    this.getList()
  }
  // 跳转页码查询
  handleCurrentChange(val: any) {
    this.listQuery.current_page = val
    this.getList()
  }
  // size切换查询
  handleSizeChange(val: any) {
    this.listQuery.limit = val
    this.getList()
  }
  private getverifyResult(item: any) {
    if (item.apply_risk_result === 'refuse') return '拒绝'
    return `通过，额度${item.apply_risk_amount}元，年利率${item.apply_risk_loan_rate}%`
  }
  private handleDetail(id: string) {
    this.$router.push({
      path: '/risksystem/trustTrial/detail?applyRiskId=' + id
    })
  }
}
</script>

<style lang="scss" scoped>
.component-container {
  padding: 20px;
  position: relative;
  .pagination-container {
    justify-content: space-between;
  }
}
</style>
